<template>
	<view class="slide-panel" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"
		:style="{ 
          height: `${panelHeight}px`, 
          transform: `translateY(${translateY}px)`,
          transition: isDragging ? 'none' : 'transform 0.3s ease'
        }">

		<!-- 顶部拖拽条 -->
		<view class="drag-handle">
			<view class="drag-bar">
				<view class="tab"><text class="shadow-text">门店菜单</text></view>
			</view>
		</view>

		<view class="content">
			<!-- 左侧分类导航 -->
			<scroll-view class="left-category" scroll-y="true" :scroll-top="leftScrollTop">
				<view v-for="(item, index) in categories" :key="item.id" :id="'category-item_' +  index  "
					class="category-item" :class="{ active: currentCategoryIndex === index }"
					@click="handleCategoryClick(index)">
					{{ item.name }}
				</view>
			</scroll-view>

			<!-- 右侧商品列表 -->
			<scroll-view class="right-goods" scroll-y="true" :scroll-into-view="activeGoodsId" scroll-with-animation
				@scroll="handleRightScroll">
				<!-- 动态生成每个分类的商品区块 -->
				<view v-for="item in categories" :key="item.id" :id="'goods_'+item.id" class="goods-section">
					<!-- 分类标题 -->
					<view class="section-title">{{ item.name }}</view>
					<!-- 商品列表 -->
					<view class="goods-list">
						<view v-for="goods in item.goodsList" :key="goods.id" @tap.stop="open(goods)"
							class="goods-item">
							<view>
								<image class="goods-image" :src="goods.cover" mode="aspectFill"></image>
							</view>
							<view class="goods-info">
								<view class="goods-name">{{ goods.name }}</view>
								<view class="goods-tag">
									<view class="tag-item" v-for="tag in goods.tag">{{tag}}</view>
								</view>
								<view class="goods-desc">{{ goods.description }}</view>
								<view class="goods-choose">
									<view class="goods-price">
										<view class="price-original"><text class="comment">¥</text>{{ goods.price }}
										</view>
										<view class="price-discount"><text class="comment">¥</text>{{ goods.price }}优惠价
										</view>
									</view>
									<view class="add-btn" @click.stop="addToCart(goods)">
										<view class="badge">1</view>
										<uni-icons type="plusempty" size="16" color="#fff"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 内容区域（支持内部滚动） 
		<scroll-view class="content" scroll-y :scroll-top="scrollTop" @scroll="handleScroll">
			
		</scroll-view>
		-->
	</view>
</template>

<script>
	import index from '../../constants';

	export default {
		props: {
			transform: {
				type: Number,
				default: () => ({
					maxPanelHeight: 0,
					minPanelHeight: 0,
				})
			}
		},
		watch: {
			transform: {
				handler(val) {
					this.panelHeight = val.maxPanelHeight;
					this.minHeight = val.minPanelHeight;
					this.translateY = this.panelHeight - this.minHeight; // 初始为收起状态
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				panelHeight: 0, // 面板实际高度
				minHeight: 0, // 最小高度
				translateY: 0, // 当前偏移量
				startY: 0, // 触摸起始Y坐标 一直记录变化
				touchStartY: 0, // 触摸起始Y坐标 只记录开始和结束
				isDragging: false, // 是否正在拖拽
				isContentTop: true, // 内容是否在顶部

				leftScrollTop: 0, // 左边滚动位置
				currentCategoryIndex: 0, // 当前分类index
				activeGoodsId: '', // 右侧滚动定位的目标ID
				categoryPositions: [], // 存储每个分类区块的顶部位置（用于滚动检测）

				categories: [ // 示例数据（实际项目中建议从接口获取）
					{
						id: 1,
						name: '招牌奶茶',
						goodsList: [{
								id: 101,
								name: '珍珠奶茶',
								price: 18,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 102,
								name: '面包',
								price: 16,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					},
					{
						id: 2,
						name: '水果茶',
						goodsList: [{
								id: 201,
								name: '碱水',
								price: 14,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 202,
								name: '贝果',
								price: 12,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					},
					{
						id: 3,
						name: '咖啡',
						goodsList: [{
								id: 301,
								name: '珍珠奶茶',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 302,
								name: '碱水面包',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					},
					{
						id: 4,
						name: '面包',
						goodsList: [{
								id: 3011,
								name: '珍珠奶茶',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 3021,
								name: '碱水面包',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					},
					{
						id: 5,
						name: '蛋糕',
						goodsList: [{
								id: 3014,
								name: '珍珠奶茶',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 3024,
								name: '碱水面包',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					},
					{
						id: 6,
						name: '甜品',
						goodsList: [{
								id: 30142,
								name: '珍珠奶茶',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 30242,
								name: '碱水面包',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					},
					{
						id: 7,
						name: '碱水',
						goodsList: [{
								id: 67,
								name: '珍珠奶茶',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 98,
								name: '碱水面包',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					},
					{
						id: 8,
						name: '贝果',
						goodsList: [{
								id: 455,
								name: '珍珠奶茶',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 6664,
								name: '碱水面包',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					},
					{
						id: 9,
						name: '吐司',
						goodsList: [{
								id: 222,
								name: '珍珠奶茶',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 4444,
								name: '碱水面包',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					},
					{
						id: 10,
						name: '欧包',
						goodsList: [{
								id: 401,
								name: '珍珠奶茶',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 5677,
								name: '碱水面包',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					},
					{
						id: 11,
						name: '法棍',
						goodsList: [{
								id: 999,
								name: '珍珠奶茶',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 800,
								name: '碱水面包',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					},
					{
						id: 13,
						name: '恰巴塔',
						goodsList: [{
								id: 9988,
								name: '珍珠奶茶',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							},
							{
								id: 554,
								name: '碱水面包',
								price: 15,
								tag: ['招牌', '可做热饮', '含咖啡因'],
								description: '人气千目抹茶系列灵感延续。底部特调咸香芝士风味奶底浓抹液一淋而下形成分层。顶部覆盖绵密轻芝芝云顶，喝前请务必搅匀。咖啡因:黄灯。',
								cover: '/static/images/products/1.jpg'
							}
						]
					}
				]
			};
		},
		mounted() {
			// 页面加载后获取分类位置信息
			this.$nextTick(() => {
				this.getCategoryPositions();
			});
		},
		methods: {
			open(goods) {
				this.$emit('open', goods)
			},
			/**
			 * 处理左侧分类点击
			 */
			handleCategoryClick(index) {
				this.currentCategoryIndex = index;
				const currentCategory = this.categories[index];
				// 设置右侧滚动目标ID（触发scroll-into-view）
				this.activeGoodsId = `goods_${currentCategory.id}`;
				// 计算左侧选中项需要滚动的位置（保持居中显示）
				this.calculateLeftScrollTop(index);
				// 清空之前的定位ID（避免重复触发）
				setTimeout(() => {
					this.activeGoodsId = '';
				}, 500);
			},

			/**
			 * 计算左侧选中项需要滚动的位置（保持居中）
			 */
			calculateLeftScrollTop(index) {
				if (this.translateY == 0) {
					const query = uni.createSelectorQuery().in(this);
					query.select('.left-category').boundingClientRect();
					query.select(`#category-item_${index}`).boundingClientRect();

					query.exec((res) => {
						const category = res[0];
						const item = res[1];

						const leftViewHeight = category.height;
						const itemHeight = item.height;

						this.leftScrollTop = item.top - (leftViewHeight - itemHeight) / 2;
					});
				}
			},

			/**
			 * 获取每个分类区块的顶部位置信息
			 */
			getCategoryPositions() {
				let h = 0;
				const query = uni.createSelectorQuery().in(this);
				// 遍历所有分类，获取每个分类区块的位置
				this.categories.forEach((item, index) => {
					query.select(`#goods_${item.id}`).boundingClientRect();
				});
				query.exec((res) => {
					res.forEach((item, index) => {
						let top = h;
						h = h + item.height
						this.categoryPositions[index] = {
							top: top,
							bottom: h
						};

					});
				});
			},

			/**
			 * 简单防抖函数
			 */
			debounce(fn, delay = 100) {
				let timer = null;
				return function(...args) {
					if (timer) clearTimeout(timer);
					timer = setTimeout(() => {
						fn.apply(this, args);
					}, delay);
				};
			},

			/**
			 * 处理右侧商品滚动
			 */
			handleRightScroll(e) {
				const scrollTop = e.detail.scrollTop;
				this.isContentTop = scrollTop <= 20;
				// 获取当前滚动位置（使用防抖优化性能）
				this.debounce(() => {
					// 遍历分类位置信息，找到当前所在分类
					let currentIndex = 0;
					for (let i = 0; i < this.categoryPositions.length; i++) {
						if (scrollTop >= this.categoryPositions[i].top) {
							currentIndex = i;
						} else {
							break;
						}
					}
					// 避免越界
					currentIndex = Math.min(currentIndex, this.categories.length - 1);
					if (currentIndex !== this.currentCategoryIndex) {
						this.currentCategoryIndex = currentIndex;
						// 同步左侧滚动位置
						this.calculateLeftScrollTop(currentIndex);
					}
				}, 100)();
			},

			// 触摸开始
			handleTouchStart(e) {
				this.startY = e.touches[0].clientY;
				this.touchStartY = this.startY;

				// 展开状态下，若内容不在顶部则禁止下滑收起
				if (!this.isContentTop && this.translateY === 0) {
					this.isDragging = false;
					return;
				}
				this.isDragging = true;
			},

			// 触摸移动
			handleTouchMove(e) {
				if (!this.isDragging) return;

				const currentY = e.touches[0].clientY;
				const deltaY = currentY - this.startY;
				this.startY = currentY;

				// 边界控制（防止滑出屏幕）
				const newTranslateY = this.translateY + deltaY;
				const maxTranslateY = this.panelHeight - this.minHeight;
				const minTranslateY = 0;

				if (newTranslateY >= minTranslateY && newTranslateY <= maxTranslateY) {
					this.translateY = newTranslateY;
				}
			},

			// 触摸结束
			handleTouchEnd(e) {
				this.isDragging = false;
				const threshold = 50; // 滑动阈值

				const deltaY = e.changedTouches[0].clientY - this.touchStartY;

				if (Math.abs(deltaY) > threshold) {
					if (deltaY < 0) {
						this.$emit('upTouch');
						this.translateY = 0; // 展开
					} else {
						if (!this.isContentTop && this.translateY === 0) {
							return;
						}
						this.$emit('downTouch');
						this.translateY = this.panelHeight - this.minHeight; // 收起
					}
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/style/var.scss";

	.slide-panel {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		background: #f8f8f8;
		z-index: 0;
		overflow: hidden;
	}

	.drag-handle {
		/* padding: 20rpx 0;*/
		display: flex;
		justify-content: center;
	}

	/* 
	.drag-bar {
		width: 80rpx;
		height: 8rpx;
		background: #ddd;
		border-radius: 4rpx;
	}
	*/

	.drag-bar {
		width: 100%;
		background: #fff;
		display: flex;
		flex-flow: row;
		font-size: 30rpx;
		font-weight: bold;

		.tab {
			padding: 25rpx;
			/* 为伪元素建立定位基准 */
			position: relative;
			/* 或 inline-block */
			display: inline-block;

			.shadow-text {}
		}

		.tab::after {
			content: '';
			position: absolute;
			bottom: 25rpx;
			/* 距离元素底部偏移 */
			left: 50%;
			/* 起始位置偏移 */
			width: 60%;
			/* 下划线长度 */
			height: 4px;
			background-color: #006DE7;
			border-radius: 50rpx;
			/* 圆角下划线 */
			opacity: 0.6;
			transform: translateX(-50%);
		}
	}

	.content {
		/* 减去拖拽条高度 */
		height: calc(100% - 60rpx);
		display: flex;
		gap: 10rpx;
	}

	/* 左侧分类导航样式 */
	.left-category {
		width: 22vw;
		background-color: #f8f8f8;
		overflow: hidden;
		padding-bottom: 140rpx;
	}

	.category-item {
		padding: 40rpx 10rpx;
		font-size: 26rpx;
		color: #666;
		text-align: center;
		border-right: 2rpx solid transparent;
		transition: all 0.3s;
	}

	.category-item.active {
		color: #000;
		font-weight: bold;
		border-right: 2rpx solid #000;
	}

	/* 右侧商品列表样式 */
	.right-goods {
		flex: 1;
		background-color: #fff;
		padding: 20rpx 15rpx 140rpx 0;
		overflow: hidden;
	}

	.goods-section {
		margin-bottom: 10rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #000;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
	}

	.goods-list {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}

	.goods-item {
		display: flex;
		margin-bottom: 40rpx;
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	.goods-image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 8rpx;
		object-fit: cover;
	}

	.goods-info {
		flex: 1;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 15rpx;
		justify-content: space-between;
	}

	.goods-name {
		font-size: 32rpx;
		color: #000;
		margin-bottom: 5rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods-tag {
		display: flex;
		flex-direction: row;
		color: #999;
		font-size: 20rpx;
		gap: 8rpx;

		/*flex-wrap: wrap;*/
		.tag-item {
			padding: 5rpx;
			border: 1rpx solid #999;
		}
	}

	.goods-desc {
		font-size: 24rpx;
		color: #6c6c6c;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.goods-choose {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.goods-price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 10rpx;

			.price-original {
				font-size: 36rpx;
				color: #000;

				.comment {
					font-size: 0.8em;
				}
			}

			.price-discount {
				font-size: 30rpx;
				background: #eaeadd;
				color: #c9b091;
				padding-left: 20rpx;
				padding-right: 20rpx;
				border-top: 1rpx solid #dadacc;
				border-bottom: 1rpx solid #dadacc;

				.comment {
					font-size: 0.9em;
				}
			}
		}

		.add-btn {
			width: 50rpx;
			height: 50rpx;
			border-radius: 20%;
			background: $uni-primary-color;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: 0.3s all;
			position: relative;

			.badge {
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				color: #fff;
				background: $uni-primary-color;
				line-height: 30rpx;
				text-align: center;
				top: -20rpx;
				right: -20rpx;
				border: 1rpx solid #fff;
				border-radius: 50%;
				font-size: 20rpx;
				font-weight: bold;
			}

			&:active {
				transform: scale(0.9);
			}
		}
	}
</style>